<template>
  <div>
    <!-- 产品信息 -->
    <el-card>
      <h3>产品信息</h3>
      <el-row>
        <el-col :span="12">工序名称: 激光刻标</el-col>
        <el-col :span="12">任务单编号: GX2023100212</el-col>
        <el-col :span="12">工序状态: <el-tag type="success">未开始</el-tag></el-col>
        <el-col :span="12">优先级: <el-tag type="danger">紧急</el-tag></el-col>
        <el-col :span="12">
          <img :src="productImage" alt="产品图片" style="width: 100px;" />
        </el-col>
      </el-row>
    </el-card>

    <!-- 工艺路线 -->
    <el-card>
      <h3>工艺路线</h3>
      <el-row>
        <el-col :span="12">工艺路线名称: 金属打磨通用工艺</el-col>
        <el-col :span="12">工艺路线编码: DM3001_022</el-col>
        <el-col :span="12">当前工序: 喷漆</el-col>
        <el-col :span="12">工序编码: PQ2000_001</el-col>
        <el-col :span="12">工序类型: 自制工序</el-col>
      </el-row>
      <div class="process-flow">
        <el-steps :space="200" align-center finish-status="success" active="0">
          <el-step title="喷漆" status="process"></el-step>
          <el-step title="抛光"></el-step>
          <el-step title="清洗"></el-step>
          <el-step title="包装"></el-step>
        </el-steps>
      </div>
    </el-card>

    <!-- 领料信息 -->
    <el-card>
      <h3>领料信息</h3>
      <el-table :data="materials" style="width: 100%">
        <el-table-column prop="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="code" label="物料编码"></el-table-column>
        <el-table-column prop="name" label="物料名称"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="size" label="规格"></el-table-column>
        <el-table-column prop="demand" label="需领数量"></el-table-column>
        <el-table-column prop="issued" label="实领数量"></el-table-column>
        <el-table-column prop="shortage" label="缺料" width="80"></el-table-column>
      </el-table>
    </el-card>

    <!-- 报工记录 -->
    <el-card>
      <h3>报工记录</h3>
      <el-table :data="workReports" style="width: 100%">
        <el-table-column prop="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="quantity" label="报工数量"></el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="code" label="设备编码"></el-table-column>
        <el-table-column prop="width" label="宽度"></el-table-column>
        <el-table-column prop="diameter" label="直径"></el-table-column>
        <el-table-column prop="operator" label="操作人"></el-table-column>
        <el-table-column prop="time" label="报工时间"></el-table-column>
      </el-table>
    </el-card>

<!--    &lt;!&ndash; 产品图纸及附件 &ndash;&gt;-->
<!--    <el-card>-->
<!--      <h3>产品图纸及附件</h3>-->
<!--      <el-upload-->
<!--        class="upload-demo"-->
<!--        drag-->
<!--        action="#"-->
<!--        multiple>-->
<!--        <i class="el-icon-upload"></i>-->
<!--        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--        <div class="el-upload__tip" slot="tip">只能上传PDF, Word, Excel, Txt, JPG, PNG, RAR, ZIP文件, 且不超过20MB</div>-->
<!--      </el-upload>-->
<!--    </el-card>-->

    <!-- 质检记录 -->
    <el-card>
      <h3>质检记录</h3>
      <el-table :data="qualityReports" style="width: 100%">
        <el-table-column prop="index" label="质检单号" width="120"></el-table-column>
        <el-table-column prop="status" label="质检状态"></el-table-column>
        <el-table-column prop="workStep" label="工序名称"></el-table-column>
        <el-table-column prop="quantity" label="质检数量"></el-table-column>
        <el-table-column prop="accepted" label="合格量"></el-table-column>
        <el-table-column prop="rejected" label="不合格量"></el-table-column>
        <el-table-column prop="report" label="质检报告"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间"></el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
      </el-table>
    </el-card>

    <!-- 底部操作按钮 -->
    <div class="bottom-buttons">
      <el-button @click="cancel">取消</el-button>
<!--      <el-button type="success" @click="startProcess">开工</el-button>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productImage: 'https://via.placeholder.com/100',  // 替换为实际的图片地址
      materials: [
        { index: 1, code: "QA840-02", name: "通用铝合金", unit: "件", size: "35mm", demand: 200, issued: 160, shortage: 40 },
        { index: 2, code: "QA840-02", name: "通用铝合金", unit: "件", size: "35mm", demand: 200, issued: 160, shortage: 40 },
      ],

      workReports: [
          { index: 1, quantity: 100, name: "喷漆机", code: "PQ2000-001", width: 100, diameter: 10, operator: "林敏儿", time: "2021-01-01 12:00:00" },
                   { index: 2, quantity: 100, name: "清洗机", code: "PQ2000-003", width: 100, diameter: 10, operator: "林敏儿", time: "2021-01-01 12:00:00" },

      ],
      qualityReports: [
          { index: 1, status: "已完成", workStep: "喷漆", quantity: 100, accepted: 80, rejected: 20, report: "喷漆报告", createdTime: "2021-01-01 12:00:00", creator: "林敏儿" },
                   { index: 2, status: "已完成", workStep: "清洗", quantity: 100, accepted: 80, rejected: 20, report: "清洗报告", createdTime: "2021-01-01 12:00:00", creator: "林敏儿" },

      ],
    }
  },
  methods: {
    cancel() {
      console.log("取消");
    },
    startProcess() {
      console.log("开工");
    },
  }
}
</script>


<style>
.upload-demo {
  width: 100%;
  height: 150px;
  border: 1px dashed #d9d9d9;
  position: relative;
}

.bottom-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>





<!--<template>-->
<!--  <div class="app-container">-->
<!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->
<!--      <el-form-item label="工序名称" prop="processName">-->
<!--        <el-input-->
<!--          v-model="queryParams.processName"-->
<!--          placeholder="请输入工序名称"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="任务单编号" prop="processId">-->
<!--        <el-input-->
<!--          v-model="queryParams.processId"-->
<!--          placeholder="请输入任务单编号"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="工序状态" prop="pend">-->
<!--        <el-input-->
<!--          v-model="queryParams.pend"-->
<!--          placeholder="请输入工序状态"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="优先级" prop="orderLevel">-->
<!--        <el-input-->
<!--          v-model="queryParams.orderLevel"-->
<!--          placeholder="请输入优先级"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="图片" prop="img">-->
<!--        <el-input-->
<!--          v-model="queryParams.img"-->
<!--          placeholder="请输入图片"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="生产批次号" prop="batch">-->
<!--        <el-input-->
<!--          v-model="queryParams.batch"-->
<!--          placeholder="请输入生产批次号"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="数量" prop="number">-->
<!--        <el-input-->
<!--          v-model="queryParams.number"-->
<!--          placeholder="请输入数量"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="产品名称" prop="productName">-->
<!--        <el-input-->
<!--          v-model="queryParams.productName"-->
<!--          placeholder="请输入产品名称"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="产品编码" prop="productCode">-->
<!--        <el-input-->
<!--          v-model="queryParams.productCode"-->
<!--          placeholder="请输入产品编码"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="产品规格" prop="specification">-->
<!--        <el-input-->
<!--          v-model="queryParams.specification"-->
<!--          placeholder="请输入产品规格"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="计量单位" prop="unit">-->
<!--        <el-input-->
<!--          v-model="queryParams.unit"-->
<!--          placeholder="请输入计量单位"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['process:cea:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['process:cea:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['process:cea:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['process:cea:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!--    </el-row>-->

<!--    <el-table v-loading="loading" :data="ceaList" @selection-change="handleSelectionChange">-->
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="工序名称" align="center" prop="processName" />-->
<!--      <el-table-column label="任务单编号" align="center" prop="processId" />-->
<!--      <el-table-column label="工序状态" align="center" prop="pend" />-->
<!--      <el-table-column label="优先级" align="center" prop="orderLevel" />-->
<!--      <el-table-column label="图片" align="center" prop="img" />-->
<!--      <el-table-column label="生产批次号" align="center" prop="batch" />-->
<!--      <el-table-column label="数量" align="center" prop="number" />-->
<!--      <el-table-column label="产品名称" align="center" prop="productName" />-->
<!--      <el-table-column label="产品编码" align="center" prop="productCode" />-->
<!--      <el-table-column label="产品规格" align="center" prop="specification" />-->
<!--      <el-table-column label="计量单位" align="center" prop="unit" />-->
<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['process:cea:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['process:cea:remove']"-->
<!--          >删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    -->
<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

<!--    &lt;!&ndash; 添加或修改产品信息对话框 &ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="工序名称" prop="processName">-->
<!--          <el-input v-model="form.processName" placeholder="请输入工序名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="任务单编号" prop="processId">-->
<!--          <el-input v-model="form.processId" placeholder="请输入任务单编号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="工序状态" prop="pend">-->
<!--          <el-input v-model="form.pend" placeholder="请输入工序状态" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="优先级" prop="orderLevel">-->
<!--          <el-input v-model="form.orderLevel" placeholder="请输入优先级" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="图片" prop="img">-->
<!--          <el-input v-model="form.img" placeholder="请输入图片" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="生产批次号" prop="batch">-->
<!--          <el-input v-model="form.batch" placeholder="请输入生产批次号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="数量" prop="number">-->
<!--          <el-input v-model="form.number" placeholder="请输入数量" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品名称" prop="productName">-->
<!--          <el-input v-model="form.productName" placeholder="请输入产品名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品编码" prop="productCode">-->
<!--          <el-input v-model="form.productCode" placeholder="请输入产品编码" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品规格" prop="specification">-->
<!--          <el-input v-model="form.specification" placeholder="请输入产品规格" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计量单位" prop="unit">-->
<!--          <el-input v-model="form.unit" placeholder="请输入计量单位" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { listCea, getCea, delCea, addCea, updateCea } from "@/api/process/cea";-->

<!--export default {-->
<!--  name: "Cea",-->
<!--  data() {-->
<!--    return {-->
<!--      // 遮罩层-->
<!--      loading: true,-->
<!--      // 选中数组-->
<!--      ids: [],-->
<!--      // 非单个禁用-->
<!--      single: true,-->
<!--      // 非多个禁用-->
<!--      multiple: true,-->
<!--      // 显示搜索条件-->
<!--      showSearch: true,-->
<!--      // 总条数-->
<!--      total: 0,-->
<!--      // 产品信息表格数据-->
<!--      ceaList: [],-->
<!--      // 弹出层标题-->
<!--      title: "",-->
<!--      // 是否显示弹出层-->
<!--      open: false,-->
<!--      // 查询参数-->
<!--      queryParams: {-->
<!--        pageNum: 1,-->
<!--        pageSize: 10,-->
<!--        processName: null,-->
<!--        processId: null,-->
<!--        pend: null,-->
<!--        orderLevel: null,-->
<!--        img: null,-->
<!--        batch: null,-->
<!--        number: null,-->
<!--        productName: null,-->
<!--        productCode: null,-->
<!--        specification: null,-->
<!--        unit: null-->
<!--      },-->
<!--      // 表单参数-->
<!--      form: {},-->
<!--      // 表单校验-->
<!--      rules: {-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.getList();-->
<!--  },-->
<!--  methods: {-->
<!--    /** 查询产品信息列表 */-->
<!--    getList() {-->
<!--      this.loading = true;-->
<!--      listCea(this.queryParams).then(response => {-->
<!--        this.ceaList = response.rows;-->
<!--        this.total = response.total;-->
<!--        this.loading = false;-->
<!--      });-->
<!--    },-->
<!--    // 取消按钮-->
<!--    cancel() {-->
<!--      this.open = false;-->
<!--      this.reset();-->
<!--    },-->
<!--    // 表单重置-->
<!--    reset() {-->
<!--      this.form = {-->
<!--        processName: null,-->
<!--        processId: null,-->
<!--        pend: null,-->
<!--        orderLevel: null,-->
<!--        img: null,-->
<!--        batch: null,-->
<!--        number: null,-->
<!--        productName: null,-->
<!--        productCode: null,-->
<!--        specification: null,-->
<!--        unit: null-->
<!--      };-->
<!--      this.resetForm("form");-->
<!--    },-->
<!--    /** 搜索按钮操作 */-->
<!--    handleQuery() {-->
<!--      this.queryParams.pageNum = 1;-->
<!--      this.getList();-->
<!--    },-->
<!--    /** 重置按钮操作 */-->
<!--    resetQuery() {-->
<!--      this.resetForm("queryForm");-->
<!--      this.handleQuery();-->
<!--    },-->
<!--    // 多选框选中数据-->
<!--    handleSelectionChange(selection) {-->
<!--      this.ids = selection.map(item => item.processName)-->
<!--      this.single = selection.length!==1-->
<!--      this.multiple = !selection.length-->
<!--    },-->
<!--    /** 新增按钮操作 */-->
<!--    handleAdd() {-->
<!--      this.reset();-->
<!--      this.open = true;-->
<!--      this.title = "添加产品信息";-->
<!--    },-->
<!--    /** 修改按钮操作 */-->
<!--    handleUpdate(row) {-->
<!--      this.reset();-->
<!--      const processName = row.processName || this.ids-->
<!--      getCea(processName).then(response => {-->
<!--        this.form = response.data;-->
<!--        this.open = true;-->
<!--        this.title = "修改产品信息";-->
<!--      });-->
<!--    },-->
<!--    /** 提交按钮 */-->
<!--    submitForm() {-->
<!--      this.$refs["form"].validate(valid => {-->
<!--        if (valid) {-->
<!--          if (this.form.processName != null) {-->
<!--            updateCea(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("修改成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          } else {-->
<!--            addCea(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("新增成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    /** 删除按钮操作 */-->
<!--    handleDelete(row) {-->
<!--      const processNames = row.processName || this.ids;-->
<!--      this.$modal.confirm('是否确认删除产品信息编号为"' + processNames + '"的数据项？').then(function() {-->
<!--        return delCea(processNames);-->
<!--      }).then(() => {-->
<!--        this.getList();-->
<!--        this.$modal.msgSuccess("删除成功");-->
<!--      }).catch(() => {});-->
<!--    },-->
<!--    /** 导出按钮操作 */-->
<!--    handleExport() {-->
<!--      this.download('process/cea/export', {-->
<!--        ...this.queryParams-->
<!--      }, `cea_${new Date().getTime()}.xlsx`)-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
